<template>
  <div class="message">
    <van-nav-bar title="消息" />
    <van-grid :border="false">
      <van-grid-item
        v-for="item in gridList"
        :key="item.id"
        :icon="item.icon"
        :text="item.text"
        @click="messageTypeHandle(item.id)"
      />
    </van-grid>
    <div>
      <MessageItem v-if="list.length !== 0" :list="list"></MessageItem>
      <van-empty v-else description="该列表下暂无消息" />
    </div>
  </div>
</template>

<script>
import MessageItem from "./components/MessageItem.vue";
export default {
  name: "Message",
  components: {
    MessageItem,
  },
  data() {
    return {
      gridList: [
        {
          id: 1,
          text: "评论",
          icon: "chat-o",
        },
        {
          id: 2,
          text: "点赞",
          icon: "good-job-o",
        },
        {
          id: 3,
          text: "收藏",
          icon: "star-o",
        },
        {
          id: 4,
          text: "粉丝",
          icon: "friends-o",
        },
      ],
      list: [
        {
          id: 1,
          name: "社区官方",
          item: "2024-03-21",
          content: "您的个人资料审核已通过, 请知晓!",
          photo: "https://img01.yzcdn.cn/vant/cat.jpeg",
        },
      ],
      remarkList: [],
      likeList: [],
      collectList: [],
      fansList: [],
    };
  },
  methods: {
    messageTypeHandle(id) {
      switch (id) {
        case 1:
          this.list = this.remarkList;
          break;

        case 2:
          this.list = this.likeList;
          break;

        case 3:
          this.list = this.collectList;
          break;

        case 4:
          this.list = this.fansList;
          break;

        default:
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.message {
  .divider {
    width: 100%;
    height: 8px;
    background-color: #f8f9fa;
  }
}
</style>
